<template>
  <div class="page">
    <!-- header -->
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="我要约课"
    ></van-nav-bar>
    <div class="app-page">
      <van-cell-group>
        <van-field v-model="datevalue" label="预约时间" placeholder="请选择" readonly @click="showPopup" />
      </van-cell-group>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
      <div class="box-cells" style="padding:15px">
        <van-cell v-for="(item, i) in jiaolian" :key="i" @click="href('/SelectCoacHour')">
          <template #icon>
            <img :src="item.pic" class="p-avatar" alt />
          </template>
          <template #title>
            <div class="pl-heading">
              <div class="pl-name">{{item.title}}</div>
              <div class="pl-age">10年教龄</div>
            </div>
            <div class="sch-raty">
              <span class="star">★</span>
              <span class="star">★</span>
              <span class="star">★</span>
              <span class="star">★</span>
              <span class="star">★</span>
            </div>
            <div class="pl-price">40元/小时</div>
            <div class="pl-desc">大众驾校</div>
          </template>
          <template #right-icon>
            <div class="right-cell">
              <i class="iconfont van-icon-tel"></i>
              <p>21.6km</p>
            </div>
          </template>
        </van-cell>
      </div>
    </div>
    <!-- 时间选择 -->
    <van-popup v-model="showPicker" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="onConfirm"
        @cancel="onCancel"
        title="选择预约时间"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 0,
      value2: 0,
      value3: 0,
      option1: [
        { text: "车型:C1", value: 0 },
        { text: "车型:C2", value: 1 },
        { text: "车型:B1", value: 2 },
        { text: "车型:B2", value: 3 }
      ],
      option2: [
        { text: "培训点", value: 0 },
        { text: "培训点2", value: 1 },
        { text: "培训点3", value: 2 }
      ],
      option3: [
        { text: "科目一", value: 0 },
        { text: "科目二", value: 1 },
        { text: "科目三", value: 2 }
      ],
      datevalue: "",
      showPicker: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      jiaolian: [
        {
          title: "陆建军",
          pic: require("../../assets/avatar.jpg")
        },
        {
          title: "刘建军",
          pic: require("../../assets/avatar.jpg")
        }
      ]
    };
  },
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    onConfirm(val) {
      this.showPicker = false;
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.datevalue = `${year}-${month}-${day}`;
      this.show = false;
    },
    onCancel() {
      this.showPicker = false;
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    showPopup() {
      this.showPicker = true;
    },
    href(url) {
      this.$router.push({ path: url });
    }
  },
    created(){
    let dsBridge = require("dsbridge");
         dsBridge.call("goBack","", function() {
           history.go(-1);
         });
   },
};
</script>
<style scoped>
.app-page {
  background-color: #f5f5f5;
}

.set-cells /deep/ .van-cell-group {
  margin-bottom: 15px;
}
</style>
